<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2020/10/4
  Time: 22:22
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page isELIgnored="false" %>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="<%=request.getContextPath()%>/css/index.css" rel="stylesheet">
    <link href="<%=request.getContextPath()%>/css/bootstrap.min.css" rel="stylesheet">
    <link href="<%=request.getContextPath()%>/css/style.css" rel="stylesheet" type="text/css">
    <link rel='stylesheet' href='https://unicons.iconscout.com/release/v2.1.9/css/unicons.css'>
    <link href="<%=request.getContextPath()%>/css/foot.css" rel="stylesheet" type="text/css"  />
    <link href="<%=request.getContextPath()%>/css/index01.css" rel="stylesheet">
    <link href="<%=request.getContextPath()%>/css/loading.css" rel="stylesheet" type="text/css">
    <style>
        html {
            font-family: 微软雅黑, serif;
            color: #333333;
        }

        a {
            color: #1D8CE0;
            cursor: pointer;
        }

        * {
            margin: 0px;
            padding: 0px;
        }


    </style>
    <script>
        function login(){
            if (document.getElementById("login").style.display==="none") {
                document.getElementById("login").style.display="block";
            }else {
                document.getElementById("login").style.display="none";
            }
        }
    </script>
</head>
<body style="background: #eee;">
<%@include file="../common/nav.jsp"%>

<div style="margin-left: 18%;display: flex">
    <!--    导航栏-->
    <div class="badge-info" style="width: 10%;margin: 10px;padding: 10px;height: 350px;border-radius: 5px">
        <button class="btn-info" style="width: 100%;border:none;height: 55px;" onclick="a()">首页</button>
        <button class="btn-info" style="width: 100%;border:none;height: 55px;" onclick="a1()">我的考试</button>
        <button class="btn-info" style="width: 100%;border:none;height: 55px;" onclick="a2()">错题集</button>
        <button class="btn-info" style="width: 100%;border:none;height: 55px;" onclick="a3()" >我的收藏</button>
        <button class="btn-info" style="width: 100%;border:none;height: 55px;" onclick="a4()">我的任务</button>
        <button class="btn-info" style="width: 100%;border:none;height: 55px;" onclick="a5()">信息修改</button>
    </div>
    <div id="a1" style="height: 600px;width: 65%;background:white;margin:10px;padding: 20px;border-radius: 5px" >
        <div style="width: 100%;display: flex;padding: 10px;border-radius: 5px;border: 2px solid  #23c6c8;background: #ddd">
            <img src="../img/athor.jpg" alt="" width="80px" height="80px" style="border-radius: 15px">
            <div style="background:#eee;height: 50px;width: 100%;margin: 10px;padding: 5px;border-radius: 5px">
                <span style="line-height: 38px;font-weight: bold;font-size: 30px">${sessionScope.user.usNickname}</span>
                <span style="line-height: 38px;font-weight: bold;font-size: 20px;float: right;padding-right: 10px">等级：${sessionScope.level.levelUlevel}</span>

            </div>
            <button style="width: 120px;height: 50px;border: none;border-radius: 5px;padding: 10px;margin-top: 10px;margin-right: 10px" onclick="a5()">修改个人信息</button>
        </div>
        <div style="display: flex;margin-top: 20px">
            <div   style="background:#eee;height:200px;margin-right: 10px;width: 20%;border-radius: 5px;font-size: 15px;line-height: 50px">
                <h3 style="padding: 5px;background: #23c6c8;border-top-right-radius: 5px;border-top-left-radius: 5px;color: whitesmoke">等级</h3>
                <div style="padding-left: 20px;">
                    <div><strong>当前等级:</strong>&nbsp;&nbsp;${sessionScope.level.levelUlevel}</div>
                    <div><strong>等级称号:</strong>&nbsp;&nbsp;${sessionScope.level.levelName}</div>
                    <div><strong>当前经验:</strong>&nbsp;&nbsp;${sessionScope.level.levelUintegral}/100</div>
                </div>

            </div>
            <div  style="background: #eee;height:200px;width: 60%;border-radius: 5px">
                <h3 style="padding: 5px;background:#23c6c8;border-top-right-radius: 5px;border-top-left-radius: 5px;color: whitesmoke">任务
                    <button style="color: whitesmoke;float: right;border: none;background: #23c6c8" onclick="a4()">查看全部任务</button></h3>
                <div style="line-height: 30px;font-size: 15px;">

                <table class="table table-striped">
                    <c:forEach begin="0"  end="3" items="${sessionScope.tasks}" var="t">
                        <tr>
                            <td>${t.taskName}</td>
                            <td>${t.taskDiff}</td>
                            <td>${t.taskTheme}</td>
                        </tr>
                    </c:forEach>
                </table>


                </div>
            </div>
            <div  style="background: #eee;height:200px;margin-left: 10px;width: 20%;border-radius: 5px">
                <h3 style="padding: 5px;background:#23c6c8;border-top-right-radius: 5px;border-top-left-radius: 5px;color: whitesmoke">任务</h3>
            </div>
        </div>


        <div  style="background: #eee;height:200px;margin-top: 20px;border-radius: 5px">
            <h3 style="padding: 5px;background: #23c6c8;border-top-right-radius: 5px;border-top-left-radius: 5px;color: whitesmoke">最近成绩
                <button style="color: whitesmoke;float: right;border: none;background: #23c6c8" onclick="a1()">查看全部成绩</button></h3>
            <table class="table table-bordered">
                <thead>
                <tr>
                    <td>名称</td>
                    <td>成绩</td>
                    <td>用时</td>
                    <td>考试日期</td>
                </tr>
                </thead>
                <tbody>
                <c:forEach begin="0"  end="2" items="${sessionScope.score}" var="s">
                    <tr >
                        <td>${s.parperName}</td>
                        <td>${s.exaScore}</td>
                        <td>${s.exaTime}</td>
                        <td>${s.exaDate}</td>
                    </tr>
                </c:forEach>
                </tbody>
            </table>
        </div>
    </div>
    <div id="a2" style="height: 600px;width: 65%;background:white;margin:10px;display: none;padding: 20px;border-radius: 5px">
        <table class="table table-striped" style="background: #eee">
            <caption>考试成绩</caption>
            <thead>
            <tr >
                <td>考试名称</td>
                <td>考试成绩</td>
                <td>用时</td>
                <td>考试日期</td>
            </tr>
            </thead>
            <tbody>
            <c:forEach begin="0"  end="10" items="${sessionScope.score}" var="s">
                <tr οnmοuseοver="this.style.backgroundColor='#ffff66';" οnmοuseοut="this.style.backgroundColor='#d4e3e5';">
                    <td>${s.parperName}</td>
                    <td>${s.exaScore}</td>
                    <td>${s.exaTime}</td>
                    <td>${s.exaDate}</td>
                </tr>
            </c:forEach>
            </tbody>
        </table>
        <ul>
            <li>
                <ul class="pagination" style="padding-left: 40%;padding-top: 0px;display: none">
                    <li><a href="#">&laquo;</a></li>
                    <li class="active"><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                    <li><a href="#">5</a></li>
                    <li><a href="#">&raquo;</a></li>
                </ul>
            </li>
        </ul>
    </div>
    <div id="a3" style="height: 600px;width: 65%;background:white;margin:10px;display: none;padding: 20px;border-radius: 5px">
        <table  class="table table-striped"   border="height=30 cellpadding=10">
            <caption>错题集</caption>
            <thead>
            <tr>
                <th>题目类型</th>
                <th>题目内容</th>
                <th>正确答案</th>
                <th>你的答案</th></tr>
            </thead>
            <tbody>
            <c:forEach begin="0"  end="9" items="${sessionScope.wrongList}" var="c" >
                <tr >
<%--                                            <td>${sessionScope.mywrongtopic.wrongType}</td>--%>
<%--                                            <td>${sessionScope.mywrongtopic.wrongStem}</td>--%>
<%--                                            <td>${sessionScope.mywrongtopic.trueAnswer}</td>--%>
<%--                                            <td>${sessionScope.mywrongtopic.wrongAnswer}</td>--%>


                    <td>${c.wrongType}</td>
                    <td>${c.wrongStem}</td>
                    <td>${c.trueAnswer}</td>
                    <td>${c.wrongAnswer}</td>

                </tr>
            </c:forEach>
            </tbody>
        </table>
        <ul>
            <li>
                <ul class="pagination" style="padding-left: 40%;padding-top: 0px;">
                    <li><a href="#">&laquo;</a></li>
                    <li class="active"><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                    <li><a href="#">5</a></li>
                    <li><a href="#">&raquo;</a></li>
                </ul>
            </li>
        </ul>
    </div>
    <div id="a4" style="height: 600px;width: 65%;background:white;margin:10px;display: none;padding: 20px;border-radius: 5px">
<%--        <table  class="table table-striped"   style=" border: 1px solid #e7e7e7;padding: 2px;height=100px">--%>
    <table  class="table table-striped"   border="height=30 cellpadding=10">
            <caption>我的收藏</caption>
            <thead>
            <tr>
                <th>题目语言</th>
                <th>题目难度</th>
                <th>题目内容</th>
            </tr>
            </thead>

            <tbody>
            <c:forEach begin="0"  end="9" items="${sessionScope.mycollection}" var="c" >
            <tr class="active">
                <td>${c.languageType}</td>
                <td>${c.colDiff}</td>
                <td>${c.colStem}</td>
            </tr>
            </c:forEach>
            </tbody>

        </table>
        <ul>
            <li>
                <ul class="pagination" style="padding-left: 40%;padding-top: 0px;">
                    <li><a href="#">&laquo;</a></li>
                    <li class="active"><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                    <li><a href="#">5</a></li>
                    <li><a href="#">&raquo;</a></li>
                </ul>
            </li>
        </ul>
    </div>
    <div id="a5" style="height: 600px;width: 65%;background:white;margin:10px;display: none;padding: 20px;border-radius: 5px">
        <table >
            <c:forEach begin="0"  end="9" items="${sessionScope.tasks}" var="t">
                <tr>
                    <td>${t.taskName}</td>
                    <td>${t.taskDiff}</td>
                    <td>${t.taskTheme}</td>
                </tr>
            </c:forEach>
        </table>
    </div>
    <div id="a6" style="height: 650px;width: 65%;background:white;margin:10px;display: none;padding: 20px;border-radius: 5px">
        <div style="display: flex;background: #eee;padding: 20px;">
            <div><img src="../img/athor.jpg" alt="" width="100px" height="100px" style="margin-right: 20px"><div> <a href="">修改头像</a></div></div>
            <div style="padding-left: 10%;padding-bottom: 30px;width: 80%">
                <div><span style="line-height: 50px">昵&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;称&nbsp;:&nbsp;&nbsp;&nbsp;</span><input value="${sessionScope.user.usNickname}" id="nickname" type="text"  style="height: 30px;width: 200px;border: none">
                    <div id="nickname_msg" style="color: #ff5500;font-size: 10px"></div></div>

                <div><span style="line-height: 50px">修改姓名&nbsp;:&nbsp;&nbsp;&nbsp;</span><input value="${sessionScope.user.usName}" id="name" type="text" style="height: 30px;width: 200px;border: none">
                    <div id="name_msg" style="color: #ff5500;font-size: 10px"></div></div>

                <div><span style="line-height: 50px">性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别&nbsp;:&nbsp;&nbsp;&nbsp;</span>

                    <input id="man" type="radio"  name="1" value="1"    <c:if test="${sessionScope.user.usSex==1}"> checked ="checked" </c:if>/>男
                    <input id="woman" type="radio"  name="1" value="0"  <c:if test="${sessionScope.user.usSex==0}"> checked ="checked"</c:if> />女

                </div>


                <div><span style="line-height: 50px">手机号码&nbsp;:&nbsp;&nbsp;&nbsp;</span><input  value="${sessionScope.user.usPhone}" id="phone" type=" text" style="height: 30px;width: 200px;border: none">
                    <div id="phone_msg" style="color: #ff5500;font-size: 10px"></div></div>

                <div><span style="line-height: 50px">修改密码&nbsp;:&nbsp;&nbsp;&nbsp;</span><input value="${sessionScope.user.usPassword}" id="password" type="text" style="height: 30px;width: 200px;border: none">
                    <div id="password_msg" style="color: #ff5500;font-size: 10px"></div></div>
                <div><span style="line-height: 50px">修改生日&nbsp;:&nbsp;&nbsp;&nbsp;</span><input PLACEHOLDER="请选择生日" value="${sessionScope.user.usBirthday}" id="birthday" type="date" style="height: 30px;width: 200px;border: none">
<%--                    <div id="birthday_msg" style="color: #ff5500;font-size: 10px"></div>--%>
                </div>
               <div><span style="line-height: 50px">修改学历&nbsp;:&nbsp;&nbsp;&nbsp;</span>
                    <select id="education" name="education"  >
                        <option selected="selected" > --学历--</option>
                        <option value="大专" >大专</option>
                        <option value="本科" >本科</option>
                        <option value="硕士" >硕士</option>
                        <option value="博士" >博士</option>

                     </select>


<%--                   <div id="education_msg" style="color: #ff5500;font-size: 10px"></div>--%>
               </div>


                <div><span style="line-height: 50px">修改学校&nbsp;:&nbsp;&nbsp;&nbsp;</span><input value="${sessionScope.user.usSchool}" id="school" type="text" style="height: 30px;width: 200px;border: none"></div>
                <div><span style="line-height: 50px">修改地址&nbsp;:&nbsp;&nbsp;&nbsp;</span><input value="${sessionScope.user.usAdress}" id="adress" type="text" placeholder="XX省XX市XX区" style="height: 30px;width: 200px;border: none"></div>


            <div data-toggle="distpicker">
                <span style="line-height: 50px">现居地址&nbsp;:&nbsp;&nbsp;&nbsp;</span>
                <select data-province="浙江省"></select>
                <select data-city="杭州市"></select>
                <select data-district="西湖区"></select>
            </div>

            </div>

        </div>


        <button class="btn-success" style="width: 100px;height: 50px;border: none;float: right" onclick="update(${sessionScope.user.usId})">确认</button>

    </div>

</div>

<script>
    function a(){
        let a = document.getElementById("a1");
        let a1 = document.getElementById("a2");
        let a2 = document.getElementById("a3");
        let a3 = document.getElementById("a4");
        let a4 = document.getElementById("a5");
        let a5 = document.getElementById("a6");
        a.style.display="block"
        a1.style.display="none"
        a2.style.display="none"
        a3.style.display="none"
        a4.style.display="none"
        a5.style.display="none"
    }
    function a1(){
        let a = document.getElementById("a1");
        let a1 = document.getElementById("a2");
        let a2 = document.getElementById("a3");
        let a3 = document.getElementById("a4");
        let a4 = document.getElementById("a5");
        let a5 = document.getElementById("a6");
        a.style.display="none"
        a1.style.display="block"
        a2.style.display="none"
        a3.style.display="none"
        a4.style.display="none"
        a5.style.display="none"
    }
    function a2(){
        let a = document.getElementById("a1");
        let a1 = document.getElementById("a2");
        let a2 = document.getElementById("a3");
        let a3 = document.getElementById("a4");
        let a4 = document.getElementById("a5");
        let a5 = document.getElementById("a6");
        a.style.display="none"
        a1.style.display="none"
        a2.style.display="block"
        a3.style.display="none"
        a4.style.display="none"
        a5.style.display="none"
    }
    function a3(){
        let a = document.getElementById("a1");
        let a1 = document.getElementById("a2");
        let a2 = document.getElementById("a3");
        let a3 = document.getElementById("a4");
        let a4 = document.getElementById("a5");
        let a5 = document.getElementById("a6");
        a.style.display="none"
        a1.style.display="none"
        a2.style.display="none"
        a3.style.display="block"
        a4.style.display="none"
        a5.style.display="none"
    }
    function a4(){
        let a = document.getElementById("a1");
        let a1 = document.getElementById("a2");
        let a2 = document.getElementById("a3");
        let a3 = document.getElementById("a4");
        let a4 = document.getElementById("a5");
        let a5 = document.getElementById("a6");
        a.style.display="none"
        a1.style.display="none"
        a2.style.display="none"
        a3.style.display="none"
        a4.style.display="block"
        a5.style.display="none"
        <%--var uid = ${sessionScope.user.usId};--%>
        <%--$.post("/yuezhi/user/collect.action", {--%>
        <%--    "uid": uid--%>
        <%--},function () {})--%>
    }
    function a5(){
        let a = document.getElementById("a1");
        let a1 = document.getElementById("a2");
        let a2 = document.getElementById("a3");
        let a3 = document.getElementById("a4");
        let a4 = document.getElementById("a5");
        let a5 = document.getElementById("a6");
        a.style.display="none"
        a1.style.display="none"
        a2.style.display="none"
        a3.style.display="none"
        a4.style.display="none"
        a5.style.display="block"

    }
</script>


<script type="text/javascript" src="../js/jquery.min.js" ></script>
<script type="text/javascript" src="../js/bootstrap.min.js" ></script>
<script type="text/javascript" src="../js/person.js" ></script>
<script type="text/javascript" src="../js/distpicker.data.js"></script>
<script type="text/javascript" src="../js/distpicker.js"></script>
<script>
    $(function(){
        <%--let eduction = ${sessionScope.user.usEducation};--%>
        if ("${sessionScope.user.usEducation}"=="大专"){
            $("#education option[value='大专']").attr("selected",true)
        }else if ("${sessionScope.user.usEducation}"=="本科"){
            $("#education option[value='本科']").attr("selected",true)
        }else if("${sessionScope.user.usEducation}"=="硕士"){
            $("#education option[value='硕士']").attr("selected",true)
        }else if("${sessionScope.user.usEducation}"=="博士"){
            $("#education option[value='博士']").attr("selected",true)
        }
    })
</script>

</body>
</body>
</html>
